/* ============================================================
   Eagle River Tubing Co. — Design Tokens
   Colors, type, spacing, radii, shadows
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Nunito:wght@400;600;700;800&family=Caveat:wght@500;600;700&family=Kalam:wght@400;700&display=swap');

:root {
  /* ---------- COLORS ---------- */

  /* Brand core — pulled directly from the logo + landing page */
  --ertc-ink:           #0F2A3F;   /* Deep navy. Primary line-art / text color */
  --ertc-ink-soft:      #1F3A52;   /* Slightly lighter navy for body text */
  --ertc-ink-line:      #11243A;   /* Hand-drawn line / border weight */

  /* River blues */
  --ertc-river:         #2E7DA8;   /* Mid river blue (the tube highlight) */
  --ertc-river-deep:    #1B5E85;   /* Deep eddy */
  --ertc-river-shallow: #6FB3D1;   /* Shallow current / splash */
  --ertc-river-foam:    #C9E4F0;   /* Foam / spray tint */

  /* Mountain & sky */
  --ertc-peak:          #3D6A8C;   /* Distant peaks */
  --ertc-sky:           #B8D4E3;   /* Sky / haze */

  /* Warm naturals (paper, sand, wood) */
  --ertc-paper:         #F4EFE2;   /* Cream paper — primary canvas */
  --ertc-paper-deep:    #EBE3D0;   /* Slightly deeper cream — section break */
  --ertc-paper-warm:    #F8F2DD;   /* Warm cream — highlight surface */
  --ertc-sand:          #D9C9A6;   /* Sand / riverbank */
  --ertc-bark:          #6B4F35;   /* Wood / bark accent */

  /* Sun / pop accents (use sparingly) */
  --ertc-sun:           #E8A646;   /* Warm sun yellow */
  --ertc-life:          #D9492D;   /* Life-jacket red — for safety / CTA pop */

  /* Greens (foliage / GO indicators) */
  --ertc-pine:          #2F5D3F;
  --ertc-meadow:        #7BA76B;

  /* Neutrals */
  --ertc-stone:         #8A8275;   /* Mid neutral */
  --ertc-pebble:        #BFB6A3;   /* Light neutral */
  --ertc-shadow-ink:    rgba(15, 42, 63, 0.18);

  /* ---------- SEMANTIC ROLES ---------- */

  --bg:            var(--ertc-paper);
  --bg-alt:        var(--ertc-paper-deep);
  --bg-warm:       var(--ertc-paper-warm);
  --surface:       #FBF7EB;          /* card surface, slightly brighter than paper */
  --surface-dark:  var(--ertc-ink);   /* immersive dark sections */

  --fg:            var(--ertc-ink);
  --fg-soft:       var(--ertc-ink-soft);
  --fg-muted:      #5A6975;
  --fg-on-dark:    var(--ertc-paper);

  --line:          var(--ertc-ink-line);     /* hand-drawn outlines */
  --line-soft:     rgba(15, 42, 63, 0.35);
  --divider:       rgba(15, 42, 63, 0.18);

  --accent:        var(--ertc-river);
  --accent-deep:   var(--ertc-river-deep);
  --action:        var(--ertc-ink);          /* primary CTA — navy "BOOK NOW" */
  --action-fg:     var(--ertc-paper);
  --pop:           var(--ertc-life);          /* safety/highlight pop */
  --warn:          var(--ertc-sun);
  --ok:            var(--ertc-meadow);

  /* ---------- TYPE ---------- */

  --font-display:  'Archivo Black', 'Impact', system-ui, sans-serif;
  --font-body:     'Nunito', system-ui, -apple-system, sans-serif;
  --font-hand:     'Caveat', 'Kalam', cursive;       /* casual handwriting (callouts, map labels) */
  --font-marker:   'Kalam', 'Caveat', cursive;        /* heavier marker style */

  /* Type scale — display uses tight tracking, body open */
  --fs-display:    72px;
  --fs-h1:         48px;
  --fs-h2:         34px;
  --fs-h3:         24px;
  --fs-h4:         18px;
  --fs-body:       17px;
  --fs-small:      14px;
  --fs-tiny:       12px;

  --lh-display:    1.02;
  --lh-heading:    1.12;
  --lh-body:       1.55;

  --tracking-display: -0.01em;
  --tracking-eyebrow: 0.14em;

  /* ---------- SPACING (8px base, with a 4px half-step) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ---------- RADII ---------- */
  /* Hand-drawn vibe — slight, organic radii. Nothing is perfectly rounded. */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-sketch:  3px 3px 0 var(--ertc-ink);          /* offset ink shadow (sketchy) */
  --shadow-soft:    0 6px 18px -8px rgba(15, 42, 63, 0.30);
  --shadow-lift:    0 14px 30px -14px rgba(15, 42, 63, 0.40);
  --shadow-inset:   inset 0 0 0 2px var(--ertc-ink);   /* ink outline inset */

  /* ---------- BORDERS ---------- */
  --border-ink-1:   2px solid var(--ertc-ink);
  --border-ink-2:   3px solid var(--ertc-ink);
  --border-dashed:  2px dashed var(--ertc-ink-soft);

  /* ---------- MOTION ---------- */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:    140ms;
  --t-med:     240ms;
  --t-slow:    420ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  margin: 0;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); letter-spacing: 0.02em; }

p { margin: 0 0 1em; color: var(--fg-soft); }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-size: var(--fs-tiny);
  color: var(--fg-muted);
}

.hand        { font-family: var(--font-hand);   font-weight: 600; }
.hand-marker { font-family: var(--font-marker); font-weight: 700; }

a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--ertc-life); }

/* ============================================================
   PAPER / SKETCH UTILITY BACKGROUNDS
   ============================================================ */

.bg-paper {
  background-color: var(--ertc-paper);
  background-image:
    radial-gradient(rgba(107, 79, 53, 0.06) 1px, transparent 1px),
    radial-gradient(rgba(107, 79, 53, 0.04) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
}

.bg-paper-deep {
  background: var(--ertc-paper-deep);
}

.ink-frame {
  border: var(--border-ink-2);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sketch);
}